<html>
  <head>
    <title>SpinButton  prototype.js web control</title>
    <script src="prototype.js" type="text/javascript"></script>
    <script src="spinbutton.js" type="text/javascript"></script>
     <style type="text/css">
input.spin-button {
	padding-right:20px;		
  width:35px;
  background-color:white;
	background-repeat:no-repeat;	
	background-position:100% 0%;
	background-image:url(images/spinbtn_updn.gif);
}

input.spin-button.up {
	cursor:pointer;
	background-position:100% -18px;		
}
input.spin-button.down {
	cursor:pointer;
	background-position:100% -36px;
}
     </style>
    </head>
    <body>
    <h1>SpinButton - prototype.js control</h1>
    Project page: <a href="http://code.google.com/p/prototype-spin-button/">http://code.google.com/p/prototype-spin-button/downloads/list</a><br />
    Author: Wojciech Bajon  (wojciech [d*t] bajon @ mail-from-google)<br />
    License:  MIT
    
    <h2>Require</h2>
      prototype ver min 1.6 (tested on v 1.6.0.2)
      <br />
      <strong>Remember!</strong> this example need prototype library
      
      <h2>Features</h2>
       * click/press on inline img (as up/down button)<br />
       * keys: UP/DOWN PageUP/PageDOWN<br />
       * mouse scroll<br />
       * reaction on pasate<br /><br />
       + min/max value<br />
       + step/page <br />
       + delay/interval - behavior for onKeyPress
      
    <h2>Example</h2>
    
    <input type="text" class="spin-button" id="spinbutton" style="width:12ex" />
    <script type="text/javascript">
      new SpinButton($('spinbutton'),{min:-1, max:131});
    </script>
    
    <h2>Usage</h2>
   <pre>
     <span style="color:silver">&lt;script src="prototype.js" type="text/javascript">&lt;/script></span>
     &lt;script src="spinbutton.js" type="text/javascript">&lt;/script>
     &lt;style type="text/css">
        input.spin-button {
          padding-right:20px;		
          width:35px;
          background-color:white;
          background-repeat:no-repeat;	
          background-position:100% 0%;
          background-image:url(images/spinbtn_updn.gif);
        }
        
        input.spin-button.up {
          cursor:pointer;
          background-position:100% -18px;		
        }
        input.spin-button.down {
          cursor:pointer;
          background-position:100% -36px;
        }
     &lt;/style>
     
     &lt;script type="text/javascript">
       new SpinButton($('elementid'),{min:-1, max:131});
     &lt;/script>
   </pre>
      
    
    </body>
</html>